import { useState, useEffect, useRef } from 'react'
import PanelLeft from '../../../../../common/PanelLeft';
import BasicTable from './BasicTable';
import Legend from '../common/Legend';
import { resourcePath } from '../../../../../../utils/resource';
import useMap from '../hooks/useMap';
import RainDetail from './RainDetail';
import ReservoirDetail from './ReservoirDetail';
import { Overlay } from 'ol';
import MapPointerMove from '../common/MapPointerMove';
import useColorLayer from '../RiskZoneAnalysis/useColorLayer';
import RainTable from './RainTable';
import { Switch } from 'antd';
import Yujinmsg from '../Yujinmsg';

function Popup({ title, position }) {
    return (
        <div style={{
            // position: 'absolute',
            // left: `${position.x}px`,
            // top: `${position.y - 50}px`,
            display: 'inline-block',
            whiteSpace: 'nowrap',
            borderRadius: 10,/* 设置圆角半径 */
            backgroundColor: 'black', /* 设置背景色为黑色 */
            padding: 10, /* 可选：添加内边距以增加可读性 */
            color: 'white',
        }}>{title} </div>

    );
}
export default function FloodWarning(props) {
    const map = useMap();


    useEffect(() => {
        const handler = evt => {
            const features = map.getFeaturesAtPixel(evt.pixel);
            const targetFeature = features?.find(f => {
                return f.get('jcdlx');
            })
            if (targetFeature) {
                let node;
                switch (targetFeature.get('jcdlx')) {
                    case '气象': node = <RainDetail item={targetFeature.getProperties()} />
                        break;
                    case 'RR':
                        node = <ReservoirDetail item={targetFeature.getProperties()} />
                        break;
                    default:
                }
                node && map.dispatchEvent({
                    type: 'detail.show',
                    title: targetFeature.get('zdm'),
                    component: node
                })
            }
        }
        map.on('singleclick', handler);
        return () => {
            map.un('singleclick', handler);
        }
    }, [map])

    useEffect(() => {
        if (map) {
            setTimeout(() => {
                map.dispatchEvent({
                    type: 'fixed.item.show',
                    title: '洪涝',
                    component: <Yujinmsg activeKey={'洪涝'} />
                })
            }, 100);
        }
    }, [map])

    useColorLayer({ type: '3', visible: false })

    return <>
        <PanelLeft className="layout-v" style={{
            // top: 98
        }}>
            <BasicTable jcdlx={"气象"} title="雨情监测" mapScale={resourcePath.scales.yq_blue_scale} mapIcon={resourcePath.mapIcons[`yq_blue`]} onDetail={item => {
                map.dispatchEvent({
                    type: 'detail.show',
                    title: item.zdm,
                    component: <RainDetail item={item} />
                })
            }} />
            <BasicTable jcdlx={"河道"} title="河道监测" mapScale={resourcePath.scales.hd_blue_scale} mapIcon={resourcePath.mapIcons[`hd_blue`]} />
            <BasicTable jcdlx={"RR"} title="水库水情" mapScale={resourcePath.scales.sk_blue_scale} mapIcon={resourcePath.mapIcons[`sk_blue`]} onDetail={item => {
                map.dispatchEvent({
                    type: 'detail.show',
                    title: item.zdm,
                    component: <ReservoirDetail item={item} />
                })
            }} />
        </PanelLeft>
        <Legend extra={<div className='layout-v center'>
            {/* <div style={{ width: 130 }}>降雨量</div> */}
            <div className='layout-h center' style={{
                width: "100%",
                // marginLeft: 60
            }}>
                <div style={{
                    marginRight: 7
                }}>防汛抗旱一张图</div>
                <Switch defaultChecked={false} onChange={checked => {
                    const colorLayer = map?.getLayers()?.getArray()?.find(layer => {
                        return layer.get('layerName') === 'color-layer'
                    });
                    colorLayer?.set('visible', checked);
                }} ></Switch>
            </div>

            <div style={{ width: 165 }}>
                <span style={{
                    display: 'inline-block',
                    width: 20,
                    height: 10,
                    //borderRadius: '50%',
                    backgroundColor: 'rgba(56,101,240,0.9)'
                }}></span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;0-25
            </div>
            <div style={{ width: 165 }}>
                <span style={{
                    display: 'inline-block',
                    width: 20,
                    height: 10,
                    //borderRadius: '50%',
                    backgroundColor: 'rgba(247,245,0,0.9)'
                }}></span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;25-50
            </div>
            <div style={{ width: 165 }}>
                <span style={{
                    display: 'inline-block',
                    width: 20,
                    height: 10,
                    //borderRadius: '50%',
                    backgroundColor: 'rgba(235,142,0,0.9)'
                }}></span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;50-100
            </div>
            <div style={{ width: 165 }}>
                <span style={{
                    display: 'inline-block',
                    width: 20,
                    height: 10,
                    //borderRadius: '50%',
                    backgroundColor: 'rgba(197,34,36,0.9)'
                }}></span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;100-250
            </div>
        </div>} />
        <MapPointerMove field={'zdm'} />
    </>;
}